<template>
  <div class="slide-bar" ref="sliBar">
    <ul class="slide-waper" ref="sliWap">
      <li 
      v-for="(item,index) in fenleiLists"
      :key="index"
      class="slide-item"
      :style="{color:currentIndex == index ? '#eb4450' : '#333',background:currentIndex == index ? '#fff' : '#f4f4f4'}"
      @click="changeData(item,index)"
      >
        {{item.cat_name}}
      </li>
    </ul>
  </div>
</template>

<script>
import {getFenLeiList} from "../../api/fenlei/index"
export default {
  name:"SlideBar",
  data() {
    return {
      fenleiLists:[],
      currentIndex:0
    }
  },
  created() {
    getFenLeiList().then(res => {
      console.log(res)
      this.fenleiLists = res.data.message
      this.$emit('emitData',this.fenleiLists[0])
    })
  },
  mounted() {//挂载完毕的生命周期函数
    let sY,nY
    this.$refs.sliBar.ontouchstart = function(e){
      console.log(e.targetTouches[0].clientY)
      sY = e.targetTouches[0].clientY
    }

    this.$refs.sliBar.ontouchend = (e)=>{
      console.log(e.changedTouches[0].clientY)
      nY = e.changedTouches[0].clientY
      if(Math.abs(nY - sY) > 5){
        var t = this.$refs.sliWap.offsetTop
        var nT = nY - sY + t
        if(nT > 0){
          nT = 0
        }
        this.$refs.sliWap.style.top = nT + "px"
      }
    }

    // this.$refs.sliWap
  },
  methods:{
    changeData(v,i){
      this.currentIndex = i
      this.$emit('emitData',v)
    }
  }
}
</script>

<style lang='less' scoped>
  .slide-bar{
    width: 100%;
    height: 100%;
    overflow: auto;
    position: relative;
    .slide-waper{
      width: 100%;
      // height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      // overflow: auto;
      // overflow: hidden;
      .slide-item{
        width: 100%;
        text-align: center;
        line-height: 50px;
        border-bottom: 1px solid #eee;
        background: #f4f4f4;
      }
    }
    
  }
</style>